<template>
  <Dialog
    v-model="show"
    title="回复评论"
    width="800px"
    @close="close"
    :hideFooter="true"
  >
    <div class="reply-dialog-container">
      <!-- 回复区域 -->
      <div class="reply-section">
        <el-form :model="formData" ref="formRef" label-width="80px">
          <el-form-item label="回复内容" prop="content" :rules="[{ required: true, message: '请输入回复内容', trigger: 'blur' }]">
            <el-input
              v-model="formData.content"
              type="textarea"
              :rows="4"
              placeholder="请输入回复内容..."
            />
          </el-form-item>
          
          <el-form-item label="上传图片">
            <UploadFile
              v-model="formData.image"
              action="/api/upload"
              :limit="5"
              :file-size="5"
              @success="handleUploadSuccess"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <span class="flex_aic justify-end mt24">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交回复</el-button>
    </span>
  </Dialog>
</template>

<script setup>
import { ref, watch, reactive } from "vue";
import Dialog from "@/components/dialog.vue";
import { ElMessage } from "element-plus";
import UploadFile from "@/components/UploadFile.vue";

const show = defineModel();
const emit = defineEmits(["success"]);

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

// 表单引用
const formRef = ref(null);

// 表单数据
const formData = reactive({
  content: '',
  image: []
});

// 初始化表单数据
watch(() => props.data, (newVal) => {
  if (newVal && newVal.replyContent) {
    formData.content = newVal.replyContent;
    
    // 初始化已上传的图片
    if (newVal.replyImages && newVal.replyImages.length > 0) {
      formData.image = [...newVal.replyImages];
    } else {
      formData.image = [];
    }
  } else {
    formData.content = '';
    formData.image = [];
  }
}, { immediate: true, deep: true });

// 处理上传成功
const handleUploadSuccess = (urls) => {
  formData.image = urls;
};

// 提交回复
const handleSubmit = async () => {
  if (!formData.content) {
    ElMessage.warning('请输入回复内容');
    return;
  }
  
  try {
    // 在实际项目中，这里应该调用API提交回复内容和图片
    const responseData = {
      id: props.data.id,
      replyContent: formData.content,
      replyImages: formData.image
    };
    
    // 回调通知父组件更新
    emit('success', responseData);
    close();
    
  } catch (error) {
    ElMessage.error('提交失败，请重试');
    console.error(error);
  }
};

const close = () => {
  show.value = false;
};
</script>

<style lang="scss" scoped>
.reply-dialog-container {
  padding: 0 20px;
  max-height: 600px;
  overflow-y: auto;
}

.reply-section {
  h4 {
    margin-bottom: 15px;
    font-weight: bold;
  }
}

.tips {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
</style>
